<template>
    <div class="select-box">
        <el-select 
            class="Select1-box"
            size="mini"
            :multiple="false"
            collapse-tags
            v-model="value" 
            @change="changeCity"
            @visible-change="visibleShow"
            :placeholder="placeholder">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.id">
            </el-option>
        </el-select>
    </div>
  </template>
  <script>
    import { getCity } from '@/api/mapApi.js'
    export default {
        name: 'selectBox',
        props: {
            data: {
                type: [Object, Array],
                default: () => ([]),
            },
            addressData: {
                type: Object,
                default: () => ({}),
            },
            placeholder: {
                type: String,
                default: () => '',
            }
        },
        watch: {
            // 深度监听对象
            data: {
                handler(newVal, oldVal) {
                    this.init()
                },
                deep: true, // 深度监听
                immediate: true // 立即执行一次
            },
        },
        data() {
            return {
                visible: false,
                options: [],
                value: ''
            }
        },
        created() {
            this.init()
        },

        methods: {
            init(){
                if(this.data.length){
                    this.options = this.data
                }else{
                    this.options = []
                }
            },
            visibleShow(e){
                this.visible = e 
                if(!this.visible){
                    let id = this.value
                    this.$emit('change-city', id)
                }
            },
            changeCity(e){
                if(!this.visible){
                    this.$emit('change-city', this.value)
                }
            }
        }
    }
</script>
<style lang="scss">
    //选择框样式
    .Select1-box {

        &.el-select {
            // .el-select__tags{
            //     max-width: 100% !important;
            //     .el-tag.el-tag--info{
            //         background-color: #21406f !important;
            //         border-color: #21406f !important;
            //         color: #fff !important;
            //     }
            // }
            // 输入框样式
            .el-input__inner {
                color: #000;
                &::placeholder {
                    color: #000;
                }
            }
        }
    }
    //选择框弹出框样式
    .ChangChunEhlSelect1Popper {
        &.el-select-dropdown {
            background-color: #21406f;
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 11px 0 rgb(0 0 0 / 8%);
        }

        &.el-popper[x-placement^='bottom'] .popper__arrow::after {
            top: 0;
            border-bottom-color: #21406f;
        }

        .el-select-dropdown__item {
            color: #fff !important;

            &.selected {
                color: #fff !important;
                background-color: rgb(172 202 255 / 30%) !important;
            }
        }

        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
            background-color: rgb(172 202 255 / 30%);
        }
    }
</style>
<style scoped lang="scss">
    .select-box {
        z-index: 101;
        width: 140px;
        height: 40px;
        display: flex;
        align-items: center;
        .el-select {
            width: 220px;
        }
    }
</style>
  